<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>absolute折翼天使表现特性二：位置跟随</title>
    <style>
      input[type="button"] {
        height: 32px;
        font-size: 100%;
      }
      p {
        margin-left: 260px;
      }
      img + p {
        margin-top: 60px;
      }
    </style>
  </head>

  <body>
    <div>
      img元素默认是"行内元素"
    </div>
    
    <img src="http://img.mukewang.com/54447b06000171a002560191.jpg" />
    <img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg" />
    <!-- <div>
      <img src="http://img.mukewang.com/54447f4a0001eb7d01910256.jpg" />
    </div> -->
    <img src="http://img.mukewang.com/54447f550001ccb002560191.jpg" />
    <p>
      <input type="button" id="block" value="点击第2张图片应用display:block" />
    </p>
    <p>
      <input
        type="button"
        id="button"
        value="点击第2张图片应用position:absolute变天使"
      />
    </p>
    <script>
      var block = document.getElementById("block"),
        button = document.getElementById("button"),
        image2 = document.getElementsByTagName("img")[1];
      if (block && button && image2) {
        var value_init_button = button.value;
        button.onclick = function () {
          if (this.value == value_init_button) {
            image2.style.position = "absolute";
            this.value = "撤销";
          } else {
            image2.style.position = "";
            this.value = value_init_button;
          }
        };

        var value_init_block = block.value;
        block.onclick = function () {
          if (this.value == value_init_block) {
            image2.style.display = "block";
            this.value = "撤销";
          } else {
            image2.style.display = "";
            this.value = value_init_block;
          }
        };
      }
    </script>
  </body>
</html>
